<template>
  <el-dialog
    :close-on-click-modal="false"
    :model-value="api.detailState.visible"
    :title="api.detailState.title"
    destroy-on-close
    @close="api.onCloseDetail()"
  >
    <el-card shadow="never" :body-style="{ padding: '0px' }">
      <div class="d-flex flex-column pa-4">
        <div class="font-size-title-1 pb-2">{{ api.detailState.form.title }}</div>
        <div class="font-size-body-2" style="color: var(--el-text-color-secondary)">{{ api.detailState.form.subTitle }}</div>
      </div>
      <el-divider class="ma-0 "/>
      <div class="pa-4">
        <div v-html="api.detailState.form.content"/>
      </div>
    </el-card>
  </el-dialog>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { ArticleApi } from "~/api/system/article/article.api";
import { ref, watch } from "vue";
import { previewFile } from "~/api/util/File";

interface Props {
  api: ArticleApi;
}

const { api } = withDefaults(defineProps<Props>(), {});
const banner = ref("");
watch(() => api.detailState.form.banner, async value => {
  if(value){
    banner.value = await previewFile(value as any) as any;
  }
});
</script>

<style lang="scss" scoped>

</style>
